<template>
  <div class="classfiy">
    <div class="top">
      <van-icon name="arrow-left" @click="back"/>
      <h3>菜谱分类</h3>
      <van-icon name="search" @click="backsearch"/>
    </div>
    <div class="zanwei"></div>
    <div class="main_content">
      <!-- 左侧导航栏 -->
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          :title="item.name"
          v-for="item in this.$store.state.classfiyList"
          :key="item.id"
          :class="{ 'van-active': activeKey === item.id }"
          @click="changeactiveFn(item.id)"
        />
      </van-sidebar>
      <!-- 主界面右边 -->
      <!--  -->
      <div class="food_content" v-if="this.$store.state.rightClasFiy!=0">
        <!-- 每个侧边栏对应list -->
        <div
          class="food_list"
          v-for="(item, index) in this.$store.state.rightClasFiy"
          :key="item.id"
        >
          <div v-if="activeKey == index">
            <!-- 每一板块渲染 -->
            <div v-for="data in item.classfiy" :key="data.id" >
              <img
                :src="data.image_url"
                alt=""
                v-if="data.image_url"
                class="img_title"
              />
              <p v-if="data.name.length != 0" @click="jumpPublic(data.name)">{{ data.name }}</p>
              <div v-for="data2 in data.cs" :key="data2.id">
                <p @click="jumpPublic(data2.name)">
                  {{ data2.name }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
       <div v-else class="loading">
      <img src="../assets/loading.gif" alt="" >
    </div>
    </div>
    <div class="content"></div>
  </div>
</template>

<script>
import { Food_classfiy } from "../api/index";
export default {
  data() {
    return {
      activeKey: 0,
    };
  },
  created() {
    this.Food_classfiyFn();
  },
  methods: {
    back(){
    this.$router.push({path:'./'})
    },
    backsearch(){
     this.$router.push({path:'./search'})
    },
    jumpPublic(name){
   this.$router.push({ path: "./public", query: {keyword:name} }).catch((err)=>{
    console.log('发现错误',err);
   });
    },
    changeactiveFn(id) {
      this.activeKey = id;
    },
    async Food_classfiyFn() {
      Food_classfiy().then((content) => {
        // console.log(content);
        let { state, result } = content;
        if (state == "success") {
          let { cs } = result;
          // console.log('cs',cs);
          let objs = cs.map((item) => ({
            id: item.id,
            classfiy: item.cs,
            name: item.name,
          }));
          let data = objs.map((item) => ({
            classfiy: item.classfiy,
          }));
          data.forEach((item, index) => {
            // console.log(index,item.classfiy);
          });
          // console.log("data", data);
          this.$store.state.classfiyList = objs;
          this.$store.state.rightClasFiy = data;
          // console.log(this.$store.state.classfiyList);
          // console.log(this.$store.state.rightClasFiy);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../css/varaible.less";
.loading{
   width: 100%;
   
  text-align: center;
  img{
    margin-top: 150px;
    margin-right: 60px;
   width: 150px;
   height: 150px;
  }
}
.content {
  padding-bottom: 70px;
}
.img_title {
  padding: 0 5px;
  width: 100%;
  height: 70px;
  margin-top: 10px;
  // border-radius: 26px;
}
.main_content {
  display: flex;
  .food_content {
    position: relative;
    overflow-y: auto;
    flex: 1;
    .food_list {
      width: 100%;

      position: absolute;
      height: 100vh;
      left: 0;
      top: 0;
      color: #5f5f5f;
      font-size: 16px;

      div {
        display: flex;
        flex-wrap: wrap;
        p {
          z-index: 500;
          width: 100px;
          height: 30px;
          background-color: @classfiyColor;
          // rgb(222, 180, 180)
          margin-left: 20px;
          margin-top: 10px;
          border-radius: 20px;
          text-align: center;
          line-height: 30px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
.zanwei{
  height: 50px;
}
.top {
  height: 50px;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  width: 100%;
  z-index: 999;
  background-color: #fff;
  i {
    vertical-align: middle;
  }
}
</style>